<template>
  <a-modal
    :title="title"
    :visible="datasetConfigModalVisible"
    ok-text="确定"
    cancel-text="取消"
    width="738px"
    :mask-closable="false"
    centered
    @ok.stop="onOK"
    @cancel.stop="onCancel"
  >
    <a-tabs default-active-key="desensitization">
      <a-tab-pane key="desensitization" tab="脱敏配置">
        <desensitizationSetting
          :visible="true"
          :dataset-data="datasetData"
          :have-set-desensitization="haveSetDesensitization"
          :is-cancel="isCancel"
          @confirm="desensitizationSubmit"
        ></desensitizationSetting>
      </a-tab-pane>
      <a-tab-pane
        v-if="selectedDataType === 'database'"
        key="timing"
        tab="定时配置"
        force-render
      >
        <timingSetting
          :selected-table-data="selectedTableData"
          :selected-database-type="selectedDatabaseType"
          :is-cancel="isCancel"
          @submit="timingSubmit"
        ></timingSetting>
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/data'
import desensitizationSetting from './config/Desensitization.vue'
import timingSetting from './config/Timing.vue'

@Component({
  name: 'databaseEditModal',
  components: {
    desensitizationSetting,
    timingSetting,
  },
})
export default class DatasetConfigModal extends Vue {
  /* 标题 */
  private get title() {
    return this.selectedDataType === 'database' ? '脱敏/定时配置' : '脱敏配置'
  }

  /* 是否展示 */
  private get datasetConfigModalVisible() {
    return DataStore.datasetConfigModalVisible
  }

  /* 是否展示 */
  private get databaseConfig() {
    return DataStore.databaseConfig
  }

  /* 模式 */
  private mode: string = 'database'

  private get isSubmit() {
    return DataStore.isConfigSubmit
  }

  private isCancel: boolean = false

  /* 定时配置传入参数 */
  @Prop() selectedDatabaseType!: string
  @Prop() selectedDataType!: string
  @Prop({
    type: Object,
    default() {
      return null
    },
  })
  selectedTableData!: object

  /* 脱敏配置传入参数 */
  @Prop({ type: Array, default: [] }) datasetData!: object
  @Prop({ type: Object, default: () => ({}) }) haveSetDesensitization!: object

  private config: any = {}
  private isTimingSubmit: boolean = false
  private isDesensitizationSubmit: boolean = false

  private get isBothSubmit() {
    if (this.selectedDataType === 'database') {
      return this.isTimingSubmit && this.isDesensitizationSubmit
    }
    return this.isDesensitizationSubmit
  }

  @Watch('isBothSubmit', { immediate: true })
  public configSubmit() {
    console.log(this.config)
    if (this.isBothSubmit) {
      this.$emit('config-submit', this.config)
      this.isTimingSubmit = false
      this.isDesensitizationSubmit = false
    }
  }

  public desensitizationSubmit(data: any) {
    // this.$emit('confirm', data)
    this.config.desensitization = data
    this.isDesensitizationSubmit = true
  }

  public timingSubmit(data: any) {
    // this.$emit('submit', data)
    this.config.timing = data
    this.isTimingSubmit = true
  }

  /* 确定 */
  public onOK() {
    DataStore.setIsConfigSubmit(true)
    console.log(this.isSubmit)
    console.log('tableData', this.selectedTableData)
    console.log('tdataset', this.datasetData)

    DataStore.setDatasetConfigModalVisible(false)
  }

  /* 取消 */
  public onCancel() {
    this.isCancel = true
    DataStore.setDatasetConfigModalVisible(false)
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-modal-body {
  padding-top: 0;
}
</style>
